<template>
	<view class="container">
		<view class="top">
			<view class="label">可拖动改变分类顺序</view>
			<view class="add" @click="inputDialog.open()">+新增分类</view>
		</view>
		<l-drag :list="list" :column="1" ref="dragRef" @change="change">
			<template #grid="{ active, content, index, oldindex, oindex }">
				<view class="template" @touchstart="selDrag(index)">
					<view class="content">
						<view>
							<uni-icons type="list" size="15" color="grey" />
							{{ content.title }}
						</view>
						<view class="op">
							<view class="btn" @click="editCategory(content)">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="15" color="#4D4DFF" />
								编辑
							</view>
							<view class="btn" @click="delCategory(content.id, oindex)">
								<uni-icons type="trash" size="15" color="#4D4DFF" />
								删除
							</view>
						</view>
					</view>
				</view>
			</template>
		</l-drag>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="dialog" mode="input" :title="category.id ? '修改' : '新增' + '分类'" placeholder="请输入分类,不得超过6个字符" @confirm="addCategory" />
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Category } from '../../vendor/order_food/category';
import getCategory from '../../vendor/order_food/category';
import { state } from '../../store/shop';
const { list, add, update, del, getList, sort, category } = getCategory();
getList();
const dragRef = ref(null);

const inputDialog = ref();

const title = ref('');
const dialog = ref();

let dragIndex = -1;

type Drag = {
	content: Category;
	index: number;
	oldindex: number;
};

const change = (e) => {
	// 重排
	// 创建一个id到位置的映射
	const idOrder = e.reduce((acc, item) => {
		acc[item.content.id] = e.indexOf(item);
		return acc;
	}, {});
	// 按照idOrder的顺序对goodsList进行排序
	state.goodsList.sort((item1, item2) => idOrder[item1.id] - idOrder[item2.id]);

	state.categoryList.sort((item1, item2) => idOrder[item1.id] - idOrder[item2.id]);

	const ids: Array<number> = [];

	state.categoryList.forEach((item) => {
		ids.push(item.id);
	});
	console.log(ids);
	sort(JSON.stringify(ids));
	// console.log(state.categoryList)
};

const addCategory = (v: string) => {
	if (category.value.id) {
		// 修改
		update(category.value.id, v, () => {
			category.value.title = v;

			const item = state.goodsList.find((item) => item.id == category.value.id);
			item.title = v;

			const idx = state.categoryList.findIndex((item) => item.id == category.value.id);
			
			// console.log(idx)
			// console.log(state.categoryList)
 
			state.categoryList[idx].title = v;
			
			// list.value[idx].title =   title.value;
			
				// console.log(state.categoryList)
				// 		console.log(list.value)

			title.value = '';
			dialog.value.val = '';
		});
	} else {
		// 添加
		add(v, (id, sort) => {
			if (id == 0) {
				toast('添加失败,请稍后重试');
				return;
			}
			const item: Category = {
				id: id,
				title: v,
				sort: sort
			};
			dragRef.value.push(item);

			state.categoryList.push(item);

			state.goodsList.push(Object.assign(item, { goods_list: [] }));

			title.value = '';

			dialog.value.val = '';
		});
	}
};

const toast = (title: string) => {
	uni.showToast({
		title,
		icon: 'none'
	});
};

// 删除
const delCategory = (id: number, index: number) => {
	del(id, () => {
		uni.showModal({
			content: '确定删除吗?',
			success: () => {
				if (dragRef.value && index >= 0) {
					// 记得oindex为数组的原始index
					dragRef.value.remove(index);

					let i = state.goodsList.findIndex((item) => item.id == category.value.id);
					state.goodsList.splice(i, 1);

					i = state.categoryList.findIndex((item) => item.id == category.value.id);
					state.categoryList.splice(i, 1);
				}
			}
		});
	});
};

// 编辑
const editCategory = (c: Category) => {
	category.value = c;
	title.value = c.title;
	dialog.value.val = c.title;
	inputDialog.value.open();
};

const selDrag = (index: number) => {
	dragIndex = index;
	console.log(dragIndex);
};
</script>

<style scoped lang="scss">
.top {
	padding: 0 10px;
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	margin-bottom: $uni-spacing-row-lg;
	.add {
		color: #a5d63f;
	}
	.label {
		color: #a6a6a6;
	}
}
.container {
	background: #f8f8f8;
	height: 100vh;
}
// .sep {
// 	border: 1px solid #f5f5f5;
// 	margin: 0 auto;
// }
.template {
	font-weight: 600;
	font-size: 20px;
	background: white;
}
.content {
	line-height: 50px;
	display: flex;
	padding: 0 10px;
	justify-content: space-between;
	.op {
		font-size: 15px;
		display: flex;
		color: #4d4dff;
		.btn {
			margin-right: 10px;
		}
	}
}
.ops {
	background: white;
	display: flex;
	padding-top: 10px;
	position: fixed;
	bottom: 0;
	height: 80px;
	left: 0;
	margin: 0 auto;
	width: 100%;
	.btn {
		text-align: center;
		color: white;
		line-height: 50px;
		height: 50px;
		width: 45%;
		margin: 0 auto;
		border-radius: $uni-border-radius-lg;
	}
	.category {
		background: #e8e460;
	}
	.add {
		background: #a5d63f;
	}
}
.drag-child {
	line-height: 50px;
}
</style>
